<template>
<h1>列表渲染的使用</h1>
<ol>
    <li v-for="item in Stuname">{{ item }}</li>
</ol>

<table border="1">
    <thead>
        <tr>
            <td>名称</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="a in Stuname">
            <td v-if="a.length==2">{{ a }}</td>
        </tr>
    </tbody>
</table>
<hr/>
<table border="1">
    <thead>
        <tr>
            <td>学号</td>
            <td>名称</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="a in info" v-bind:key="a.id">
            <td>{{ a.id }}</td>
            <td>{{ a.sname }}</td>
            <td>{{ a.age }}</td>
            <td><a @click="EditInfo(a.id)">修改</a></td>
        </tr>
    </tbody>
</table>

</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
//创建路由实例
const router=useRouter();


//数组声明并初始化
var Stuname:string[]=["张三sss","李四","王五sss","赵六dd","孙七ss"];

var info=[{
    id:"1",
    sname:"张三",
    age:18
},
{
    id:"2",
    sname:"李四",
    age:19
},
{
    id:"3",
    sname:"王五",
    age:20
},
{
    id:"4",
    sname:"赵六",
    age:21
},
{
    id:"5",
    sname:"孙七",
    age:22
}];

const EditInfo=(id:string)=>{
    router.push({
        //通过路由地址传递参数
        // path:"/EditStu",
        // query:{     //query 路由传参
        //     id:id
        // }

        //通过路由名称传递参数
        name:"EditStu",
        params:{
            Sid:id  //sid是路由配置中电仪的参数名也就是router文件夹中index.ts中设置的
        }
    });
}

// const EditInfo=(id:string)=>{
//     router.push("/EditStu?id="+id);
// }

</script>



